<template>
  <div class="wrong-question-collection">
    <!-- 顶部导航栏 -->
    <TopNavbar />

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <button class="back-button" @click="handleBack">
          <img src="@/assets/back/leftback01.png" alt="返回" class="back-icon" />
          <span class="back-text">返回</span>
        </button>
        <h1 class="page-title">{{ collectionName }}({{ studentName }})</h1>
      </div>
      <div class="action-right">
        <button class="action-btn cancel-btn" @click="handleCancel">取消</button>
        <button class="action-btn save-btn" @click="handleSave">保存</button>
        <button class="action-btn complete-btn" @click="handleComplete">完成</button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 主内容展示区 -->
      <div class="content-wrapper">
        <div class="canvas-area">
          <!-- 题目统计信息 -->
          <div class="question-stats">
            <div class="info-icon-wrapper">
              <div class="info-icon">！</div>
            </div>
            <span class="stats-text">请点击图片上的题目查看详情</span>
          </div>

          <!-- 题目内容展示 -->
          <div class="questions-content">
            <div class="section-title">一、选择题</div>
            
            <!-- 题目列表 -->
            <div class="question-list">
              <!-- 题目1 -->
              <div class="question-item" @click="selectQuestionItem(1)">
                <div class="question-header">
                  <span class="question-number">1、</span>
                  <span class="question-text">这里是识别题目</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
                
                <!-- 可扩展的答案区域 -->
                <div class="answer-section">
                  <button class="answer-toggle" @click.stop="toggleAnswer(1)">
                    <span class="toggle-text">{{ expandedAnswers.includes(1) ? '收起答案' : '展开答案' }}</span>
                    <el-icon class="toggle-icon">
                      <ArrowUp v-if="expandedAnswers.includes(1)" />
                      <ArrowDown v-else />
                    </el-icon>
                  </button>
                  <div class="answer-content" v-if="expandedAnswers.includes(1)">
                    <div class="correct-answer">
                      <span class="answer-label">正确答案：</span>
                      <span class="answer-value">A</span>
                    </div>
                    <div class="answer-explanation">
                      <span class="explanation-label">解析：</span>
                      <span class="explanation-text">这里是题目的详细解析内容，帮助学生理解正确答案的原因和解题思路。</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 题目2 -->
              <div class="question-item" @click="selectQuestionItem(2)">
                <div class="question-header">
                  <span class="question-number">2、</span>
                  <span class="question-text">这里是识别题目</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
                
                <!-- 可扩展的答案区域 -->
                <div class="answer-section">
                  <button class="answer-toggle" @click.stop="toggleAnswer(2)">
                    <span class="toggle-text">{{ expandedAnswers.includes(2) ? '收起答案' : '展开答案' }}</span>
                    <el-icon class="toggle-icon">
                      <ArrowUp v-if="expandedAnswers.includes(2)" />
                      <ArrowDown v-else />
                    </el-icon>
                  </button>
                  <div class="answer-content" v-if="expandedAnswers.includes(2)">
                    <div class="correct-answer">
                      <span class="answer-label">正确答案：</span>
                      <span class="answer-value">C</span>
                    </div>
                    <div class="answer-explanation">
                      <span class="explanation-label">解析：</span>
                      <span class="explanation-text">这里是题目的详细解析内容，帮助学生理解正确答案的原因和解题思路。</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 题目3 -->
              <div class="question-item" @click="selectQuestionItem(3)">
                <div class="question-header">
                  <span class="question-number">3、</span>
                  <span class="question-text">这里是识别题目</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
                
                <!-- 可扩展的答案区域 -->
                <div class="answer-section">
                  <button class="answer-toggle" @click.stop="toggleAnswer(3)">
                    <span class="toggle-text">{{ expandedAnswers.includes(3) ? '收起答案' : '展开答案' }}</span>
                    <el-icon class="toggle-icon">
                      <ArrowUp v-if="expandedAnswers.includes(3)" />
                      <ArrowDown v-else />
                    </el-icon>
                  </button>
                  <div class="answer-content" v-if="expandedAnswers.includes(3)">
                    <div class="correct-answer">
                      <span class="answer-label">正确答案：</span>
                      <span class="answer-value">B</span>
                    </div>
                    <div class="answer-explanation">
                      <span class="explanation-label">解析：</span>
                      <span class="explanation-text">这里是题目的详细解析内容，帮助学生理解正确答案的原因和解题思路。</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部抽屉区 - 独立于主布局流 -->
    <div class="bottom-drawer" :class="{ expanded: bottomDrawerOpen }" :style="{ height: bottomDrawerOpen ? `${drawerHeight}px` : '32px' }">
      <!-- 底部抽屉触发器区域 -->
      <div class="bottom-trigger-area">
        <button class="bottom-drawer-toggle" @click="toggleBottomDrawer" @mousedown="handleMouseDown" @touchstart="handleTouchStart">
          <el-icon>
            <ArrowUp v-if="bottomDrawerOpen" />
            <ArrowDown v-else />
          </el-icon>
          <span class="bottom-drawer-title" v-if="!bottomDrawerOpen">
            点击图片上题目查看详情
          </span>
        </button>
      </div>

      <!-- 底部抽屉内容区 -->
      <div class="bottom-drawer-include" v-if="bottomDrawerOpen">
        <!-- 底部抽屉内容 -->
        <div class="bottom-drawer-content">
          <!-- 选中题目时显示题目详情 -->
          <div v-if="showQuestionDetail && selectedQuestion" class="question-detail">
            <!-- 标签页导航 -->
            <div class="detail-tabs">
              <div class="tab-item" :class="{ active: activeTab === 'overview' }" @click="activeTab = 'overview'">试卷总分</div>
              <div class="tab-item" :class="{ active: activeTab === 'choice' }" @click="activeTab = 'choice'">选择题</div>
              <div class="tab-item" :class="{ active: activeTab === 'fill' }" @click="activeTab = 'fill'">填空题</div>
              <div class="tab-item" :class="{ active: activeTab === 'essay' }" @click="activeTab = 'essay'">简答题</div>
            </div>

            <!-- 题目详情内容 -->
            <div class="detail-content">
              <!-- 题目编号导航 -->
              <div class="question-numbers">
                <div v-for="num in 9" :key="num"
                     class="question-number-item"
                     :class="{
                       active: selectedQuestion.number === num,
                       correct: num <= 2 || num === 4 || num === 5 || num === 6 || num === 7 || num === 9,
                       wrong: num === 3 || num === 8
                     }"
                     @click="selectQuestionByNumber(num)">
                  {{ num }}
                </div>
              </div>

              <!-- AI应用题目类型标签 -->
              <div class="ai-tags">
                <span class="ai-tag">AI应用一</span>
                <span class="ai-tag">AI应用二</span>
                <span class="ai-tag active">AI应用一</span>
                <span class="ai-tag disabled">AI应用三（不可用）</span>
              </div>

              <!-- 题目详情区域 -->
              <div class="question-detail-section">
                <div class="question-header-new">
                  <h3>题目详情</h3>
                </div>

                <!-- 本题错误率 -->
                <div class="error-rate-badge">
                  本题错误率：65.7%
                </div>

                <!-- 题目内容 -->
                <div class="question-content-new">
                  <p class="question-text-new">这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目</p>

                  <div class="answer-info">
                    <div class="answer-row">
                      <span class="answer-label-new">当前该考答案：</span>
                      <span class="answer-value-new student">B</span>
                      <span class="answer-label-new">正确答案：</span>
                      <span class="answer-value-new correct">A</span>
                    </div>
                  </div>

                  <!-- 重新作答按钮 -->
                  <button class="retry-button">
                    <span class="retry-icon">↻</span>
                    重新作答
                  </button>
                </div>

                <!-- 答题区域 -->
                <div class="answer-section-new">
                  <h4 class="section-title-new">答题</h4>

                  <div class="answer-options">
                    <div class="option-row">
                      <label class="option-label-new">
                        <input type="radio" name="answer" value="A" />
                        <span class="radio-custom"></span>
                        正确
                      </label>
                      <label class="option-label-new">
                        <input type="radio" name="answer" value="B" checked />
                        <span class="radio-custom"></span>
                        错误
                      </label>
                    </div>
                    <div class="answer-input">
                      <span class="input-label">题目答案解析或，当前错误原因请输入错误码</span>
                    </div>
                  </div>
                </div>

                <!-- 题目详解 -->
                <div class="explanation-section-new">
                  <h4 class="section-title-new">题目详解</h4>

                  <div class="explanation-content-new">
                    <div class="explanation-item">
                      <span class="explanation-label-new">题目解答</span>
                      <p class="explanation-text-new">这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答</p>
                    </div>

                    <div class="explanation-item">
                      <span class="explanation-label-new">题目详解</span>
                      <p class="explanation-text-new">
                        <strong>解析：</strong>题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答
                      </p>
                    </div>
                  </div>
                </div>

                <!-- 再做一题按钮 -->
                <button class="next-question-button">
                  再做一题
                </button>
              </div>
            </div>
          </div>

          <!-- 未选中题目时显示作业详情 -->
          <div v-else class="homework-overview">
            <div class="overview-header">
              <h3>{{ collectionName }}</h3>
              <div class="student-info">
                <span class="student-name">学生：{{ studentName }}</span>
                <span class="collection-date">生成时间：{{ new Date().toLocaleDateString() }}</span>
              </div>
            </div>

            <div class="statistics-grid">
              <div class="stat-item">
                <div class="stat-number">{{ totalQuestions }}</div>
                <div class="stat-label">错题总数</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ wrongQuestions }}</div>
                <div class="stat-label">待复习</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ masteredQuestions }}</div>
                <div class="stat-label">已掌握</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ Math.round((wrongQuestions / totalQuestions) * 100) }}%</div>
                <div class="stat-label">错误率</div>
              </div>
            </div>

            <div class="subject-breakdown">
              <h4>题型分布</h4>
              <div class="breakdown-list">
                <div class="breakdown-item">
                  <span class="breakdown-label">选择题</span>
                  <div class="breakdown-bar">
                    <div class="breakdown-fill" style="width: 60%"></div>
                  </div>
                  <span class="breakdown-count">3题</span>
                </div>
                <div class="breakdown-item">
                  <span class="breakdown-label">填空题</span>
                  <div class="breakdown-bar">
                    <div class="breakdown-fill" style="width: 40%"></div>
                  </div>
                  <span class="breakdown-count">2题</span>
                </div>
              </div>
            </div>

            <div class="tips-section">
              <h4>学习建议</h4>
              <ul class="tips-list">
                <li>重点复习选择题的基础概念</li>
                <li>加强填空题的计算练习</li>
                <li>建议每天复习2-3道错题</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import TopNavbar from '@/components/shared/Layout/TopNavbar.vue'
import {
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  ArrowDown,
  Plus,
  Delete,
  InfoFilled,
  Edit,
  Check,
  Close
} from '@element-plus/icons-vue'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const collectionName = ref('错题集名称')
const studentName = ref('学生姓名')

// 初始化数据
const initializeData = () => {
  // 从路由参数获取数据
  const { studentName: routeStudentName, taskName, studentId, taskId } = route.query

  if (routeStudentName) {
    studentName.value = routeStudentName as string
  }

  if (taskName) {
    collectionName.value = `${taskName} - 错题集`
  }

  console.log('错题集初始化数据:', {
    studentId,
    studentName: studentName.value,
    taskId,
    taskName,
    collectionId: route.params.collectionId
  })
}
const expandedAnswers = ref<number[]>([]) // 展开的答案ID列表
const bottomDrawerOpen = ref(false)
const drawerHeight = ref(400)
const showQuestionDetail = ref(false)
const selectedQuestion = ref<any>(null)
const isResizing = ref(false)
const startY = ref(0)
const startHeight = ref(0)
const activeTab = ref('choice') // 底部抽屉标签页，默认选择题

// 统计数据
const totalQuestions = ref(5)
const wrongQuestions = ref(3)
const masteredQuestions = ref(2)

// 方法
const handleBack = () => {
  router.back()
}

const handleCancel = () => {
  ElMessage.info('已取消')
  router.back()
}

const handleSave = () => {
  ElMessage.success('保存成功')
}

const handleComplete = () => {
  ElMessage.success('完成')
  router.back()
}

// 切换答案展开/收起
const toggleAnswer = (questionId: number) => {
  const index = expandedAnswers.value.indexOf(questionId)
  if (index > -1) {
    expandedAnswers.value.splice(index, 1)
  } else {
    expandedAnswers.value.push(questionId)
  }
}

// 选择题目项的方法
const selectQuestionItem = (questionNumber: number) => {
  // 创建一个模拟的题目对象
  const mockQuestion = {
    id: `question-${questionNumber}`,
    number: questionNumber,
    type: '选择题',
    content: `这里是识别题目 ${questionNumber}`,
    coordinates: { x: 0, y: 0, width: 100, height: 50 },
    isCorrect: questionNumber !== 1,
    score: questionNumber !== 1 ? 5 : 0,
    totalScore: 5,
    studentAnswer: questionNumber === 1 ? 'B' : 'C',
    standardAnswer: 'C',
    comment: ''
  }

  selectedQuestion.value = mockQuestion
  showQuestionDetail.value = true
  activeTab.value = 'choice' // 切换到选择题标签页
  bottomDrawerOpen.value = true

  if (!bottomDrawerOpen.value || drawerHeight.value < 300) {
    drawerHeight.value = 400
  }
}

// 通过题目编号选择题目
const selectQuestionByNumber = (questionNumber: number) => {
  selectQuestionItem(questionNumber)
}

// 底部抽屉相关方法
const toggleBottomDrawer = () => {
  bottomDrawerOpen.value = !bottomDrawerOpen.value
  if (!bottomDrawerOpen.value) {
    showQuestionDetail.value = false
    selectedQuestion.value = null
  } else if (!selectedQuestion.value) {
    // 如果没有选中题目，显示试卷总分
    activeTab.value = 'overview'
  }
}

// 处理鼠标按下事件，区分点击和拖拽
const handleMouseDown = (event: MouseEvent) => {
  if (!bottomDrawerOpen.value) {
    return
  }
  startResize(event)
}

// 处理触摸开始事件
const handleTouchStart = (event: TouchEvent) => {
  if (!bottomDrawerOpen.value) {
    // 收起状态下只处理点击
    return
  }

  // 展开状态下记录初始位置，准备判断是点击还是拖拽
  startY.value = event.touches[0].clientY
  startHeight.value = drawerHeight.value

  // 添加触摸移动和结束监听器
  document.addEventListener('touchmove', handleTouchMove, { passive: false })
  document.addEventListener('touchend', handleTouchEnd)

  event.preventDefault()
}

// 触摸移动处理 - 判断是否开始拖拽
const handleTouchMove = (event: TouchEvent) => {
  const deltaY = Math.abs(startY.value - event.touches[0].clientY)

  // 如果移动距离超过5px，认为是拖拽操作
  if (deltaY > 5 && !isResizing.value) {
    isResizing.value = true
    document.removeEventListener('touchmove', handleTouchMove)
    document.addEventListener('touchmove', handleTouchResize, { passive: false })
  }
}

// 触摸结束处理 - 判断是点击还是拖拽结束
const handleTouchEnd = (event: TouchEvent) => {
  document.removeEventListener('touchmove', handleTouchMove)
  document.removeEventListener('touchmove', handleTouchResize)
  document.removeEventListener('touchend', handleTouchEnd)

  // 如果没有进入拖拽状态，认为是点击操作
  if (!isResizing.value) {
    toggleBottomDrawer()
  }

  isResizing.value = false
}

// 拖拽调整抽屉高度
const startResize = (event: MouseEvent) => {
  isResizing.value = true
  startY.value = event.clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  event.preventDefault()
  event.stopPropagation()
}

const handleResize = (event: MouseEvent) => {
  if (!isResizing.value) return
  
  const deltaY = startY.value - event.clientY
  const maxHeight = window.innerHeight
  const newHeight = Math.max(200, Math.min(maxHeight, startHeight.value + deltaY))
  drawerHeight.value = newHeight
}

const stopResize = () => {
  isResizing.value = false
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
}

// 触摸拖拽调整抽屉高度
const startTouchResize = (event: TouchEvent) => {
  isResizing.value = true
  startY.value = event.touches[0].clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('touchmove', handleTouchResize, { passive: false })
  document.addEventListener('touchend', stopTouchResize)
  event.preventDefault()
  event.stopPropagation()
}

const handleTouchResize = (event: TouchEvent) => {
  if (!isResizing.value) return

  const deltaY = startY.value - event.touches[0].clientY
  const maxHeight = window.innerHeight
  const newHeight = Math.max(200, Math.min(maxHeight, startHeight.value + deltaY))
  drawerHeight.value = newHeight
  
  event.preventDefault()
}

const stopTouchResize = () => {
  isResizing.value = false
  document.removeEventListener('touchmove', handleTouchResize)
  document.removeEventListener('touchend', stopTouchResize)
}

// 组件挂载时初始化数据
onMounted(() => {
  initializeData()
})
</script>

<style scoped>
/* 主页面容器 */
.wrong-question-collection {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  overflow: hidden;
  padding-top: 114px;
}

/* 操作栏样式 */
.action-bar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 54px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 999;
  box-shadow: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.action-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.back-button:hover {
  background: #f5f7fa;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.back-text {
  font-size: 14px;
  color: #606266;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.action-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.cancel-btn {
  background: #fff;
  color: #606266;
  border-color: #dcdfe6;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

.save-btn {
  background: #e6a23c;
  color: #fff;
  border-color: #e6a23c;
}

.save-btn:hover {
  background: #eeb563;
  border-color: #eeb563;
}

.complete-btn {
  background: #67c23a;
  color: #fff;
  border-color: #67c23a;
}

.complete-btn:hover {
  background: #85ce61;
  border-color: #85ce61;
}

/* 内容区域 */
.content-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  height: calc(100vh - 114px);
  z-index: 1;
}

/* 内容包装层 */
.content-wrapper {
  padding: 40px 120px 40px 120px;
  background: transparent;
  flex: 1;
  border-radius: 8px;
}

/* 画布区域 */
.canvas-area {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* 题目统计信息 */
.question-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #e6f4ff;
  border-radius: 8px;
  margin-bottom: 24px;
}

.info-icon-wrapper {
  width: 24px;
  height: 24px;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  aspect-ratio: 1;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.stats-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 题目内容区域 */
.questions-content {
  background: transparent;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  padding: 0px 0 12px 0;
}

/* 题目列表 */
.question-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 题目项 */
.question-item {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  /* margin-bottom: 12px; */
}

.question-item:hover {
  background: rgba(64, 158, 255, 0.05);
}

.question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  /* padding: 12px 0; */
  background: transparent;
  border-bottom: none;
}

.question-number {
  font-weight: 600;
  color: #303133;
  flex-shrink: 0;
}

.question-text {
  font-size: 14px;
  color: #303133;
  flex: 1;
}

/* 选项列表 */
.options-list {
  /* padding: 10px 0 0 0; */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s;
  position: relative;
}

.option-label {
  font-weight: 500;
  color: #606266;
  flex-shrink: 0;
}

.option-text {
  font-size: 14px;
  color: #606266;
  flex: 1;
}

/* 答案区域样式 */
.answer-section {
  margin-top: 12px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.answer-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  font-size: 14px;
  color: #606266;
}

.answer-toggle:hover {
  color: #409eff;
}

.toggle-text {
  font-weight: 500;
}

.toggle-icon {
  font-size: 12px;
  color: inherit;
}

.answer-content {
  margin-top: 8px;
  padding: 12px 0;
  background: none;
  border: none;
}

.correct-answer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.answer-label {
  font-weight: 600;
  color: #303133;
  flex-shrink: 0;
}

.answer-value {
  font-weight: 600;
  color: #303133;
}

.answer-explanation {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.explanation-label {
  font-weight: 600;
  color: #303133;
  flex-shrink: 0;
}

.explanation-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  flex: 1;
}

/* 底部抽屉 */
.bottom-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: none;
  max-height: 100vh;
  background: transparent;
  pointer-events: none;
}

.bottom-drawer.expanded {
  height: auto;
  min-height: 300px;
  max-height: 100vh;
  z-index: 1100;
}

.bottom-drawer > * {
  pointer-events: auto;
}

/* 底部触发器区域 */
.bottom-trigger-area {
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
}

.bottom-drawer-toggle {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-bottom: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  position: relative;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  width: auto;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.bottom-drawer.expanded .bottom-drawer-toggle {
  width: 100%;
  height: 100%;
  justify-content: center;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: none;
  cursor: ns-resize;
  touch-action: pan-y;
}

.bottom-drawer-toggle:hover {
  background: #f5f7fa;
}

/* 底部抽屉内容区 */
.bottom-drawer-include {
  flex: 1;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-top: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bottom-drawer:not(.expanded) .bottom-drawer-include {
  height: 0;
  overflow: hidden;
}

.bottom-drawer-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

/* 底部抽屉内容样式 */
.bottom-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

/* 标签页导航 */
.detail-tabs {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  background: #f8f9fa;
}

.tab-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.tab-item:hover {
  color: #409eff;
}

.tab-item.active {
  color: #409eff;
  border-bottom-color: #409eff;
  background: #fff;
}

/* 题目详情内容 */
.detail-content {
  padding: 20px;
}

.question-info h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.question-info p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.question-options {
  margin: 16px 0;
}

.option-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: #606266;
}

.grading-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.score-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.status {
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
}

.status.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.status.error {
  background: #fef0f0;
  color: #f56c6c;
}

/* 作业概览样式 */
.homework-overview,
.overview-info {
  padding: 20px;
}

.overview-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 16px;
}

.overview-header h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.student-info {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: #606266;
}

.student-name,
.collection-date {
  display: flex;
  align-items: center;
}

/* 统计网格 */
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #606266;
}

/* 题型分布 */
.subject-breakdown {
  margin-bottom: 24px;
}

.subject-breakdown h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breakdown-label {
  min-width: 60px;
  font-size: 14px;
  color: #606266;
}

.breakdown-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  background: #409eff;
  transition: width 0.3s;
}

.breakdown-count {
  min-width: 40px;
  font-size: 14px;
  color: #606266;
  text-align: right;
}

/* 学习建议 */
.tips-section {
  margin-top: 24px;
}

.tips-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.tips-list li {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 题目详情样式 */
.question-header-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.question-header-detail h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.question-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.question-type {
  background: #e6f4ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 4px;
}

.question-difficulty {
  background: #fff7e6;
  color: #e6a23c;
  padding: 2px 8px;
  border-radius: 4px;
}

.question-content-detail {
  margin-bottom: 20px;
}

.question-text {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* 答案分析 */
.answer-analysis {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.student-answer,
.correct-answer-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.answer-value.error {
  color: #f56c6c;
  background: #fef0f0;
  padding: 2px 8px;
  border-radius: 4px;
}

.answer-value.correct {
  color: #67c23a;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.answer-explanation-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.explanation-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 8px 0 0 0;
}

/* 新UI设计样式 */
/* 题目编号导航 */
.question-numbers {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

.question-number-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #666;
}

.question-number-item.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

.question-number-item.correct {
  background: #f0f9ff;
  color: #409eff;
  border-color: #409eff;
}

.question-number-item.wrong {
  background: #fef0f0;
  color: #f56c6c;
  border-color: #f56c6c;
}

.question-number-item:hover {
  transform: scale(1.05);
}

/* AI标签 */
.ai-tags {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

.ai-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.ai-tag.active {
  background: #409eff;
  color: #fff;
}

.ai-tag.disabled {
  background: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

/* 题目详情区域 */
.question-detail-section {
  padding: 20px;
}

.question-header-new {
  margin-bottom: 16px;
}

.question-header-new h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 错误率徽章 */
.error-rate-badge {
  display: inline-block;
  background: #fff7e6;
  color: #e6a23c;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* 题目内容 */
.question-content-new {
  margin-bottom: 24px;
}

.question-text-new {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 16px;
}

.answer-info {
  margin-bottom: 16px;
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.answer-label-new {
  font-size: 14px;
  color: #606266;
}

.answer-value-new {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.answer-value-new.student {
  background: #fef0f0;
  color: #f56c6c;
}

.answer-value-new.correct {
  background: #f0f9ff;
  color: #67c23a;
}

/* 重新作答按钮 */
.retry-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s;
}

.retry-button:hover {
  color: #66b1ff;
}

.retry-icon {
  font-size: 16px;
}

/* 答题区域 */
.answer-section-new {
  margin-bottom: 24px;
}

.section-title-new {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.answer-options {
  margin-bottom: 16px;
}

.option-row {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.option-label-new {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
}

.option-label-new input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 16px;
  height: 16px;
  border: 2px solid #dcdfe6;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s;
}

.option-label-new input[type="radio"]:checked + .radio-custom {
  border-color: #409eff;
}

.option-label-new input[type="radio"]:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
}

.answer-input {
  margin-top: 12px;
}

.input-label {
  font-size: 12px;
  color: #909399;
}

/* 题目详解 */
.explanation-section-new {
  margin-bottom: 24px;
}

.explanation-content-new {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.explanation-item {
  margin-bottom: 16px;
}

.explanation-item:last-child {
  margin-bottom: 0;
}

.explanation-label-new {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  display: block;
  margin-bottom: 8px;
}

.explanation-text-new {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

/* 再做一题按钮 */
.next-question-button {
  width: 100%;
  height: 44px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.next-question-button:hover {
  background: #66b1ff;
}

/* 响应式设计 */
/* iPad 兼容性 */
@media (max-width: 1024px) and (min-width: 769px) {
  .action-bar {
    padding: 0 20px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .action-left,
  .action-right {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .action-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .canvas-area {
    padding: 20px;
  }

  .question-item {
    margin-bottom: 16px;
  }

  .bottom-drawer {
    max-height: 100vh;
  }

  .bottom-drawer.expanded {
    min-height: 250px;
    max-height: 100vh;
  }

  .bottom-drawer-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .bottom-drawer.expanded .bottom-drawer-toggle {
    touch-action: pan-y;
    cursor: ns-resize;
  }
}

@media (max-width: 768px) {
  .action-bar {
    padding: 0 16px;
  }

  .action-left {
    gap: 12px;
  }

  .page-title {
    font-size: 16px;
  }

  .action-right {
    gap: 8px;
  }

  .action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .content-wrapper {
    padding: 16px;
  }

  .canvas-area {
    padding: 16px;
  }

  .bottom-drawer.expanded {
    min-height: 200px;
    max-height: 100vh;
  }

  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-item {
    padding: 12px;
  }

  .stat-number {
    font-size: 20px;
  }

  .breakdown-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .breakdown-label {
    min-width: auto;
  }

  .breakdown-count {
    min-width: auto;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .action-left {
    flex: 1;
  }

  .page-title {
    font-size: 14px;
  }

  .action-right {
    gap: 6px;
  }

  .content-wrapper {
    padding: 12px;
  }

  .canvas-area {
    padding: 12px;
  }

  .bottom-drawer.expanded {
    min-height: 150px;
    max-height: 100vh;
  }
}
</style>
